<style>
.ba {
  width: 50%;
  height: 30px;
  position: absolute;
  bottom: 15px;
  left: 50%;
  margin-left: -25%;
  text-align: center;
  /* background-color: #000; */
}
.index-box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.bc-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  -webkit-animation: indexBc 25s infinite ease-in-out;
  -moz--animation: indexBc 25s infinite ease-in-out;
  background:url('../assets/img/indexbc/bc4.jpg') no-repeat  0 0/100% 100%
}
.zzc {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  position: relative;
}
.index-box .my-i {
  width: 60%;
  height: 50%;
  position: absolute;
  left: 50%;
  margin-left: -30%;
  top: 15%;
  /* background-color: #000; */
  font-size: 80px;
  text-align: center;
  color: #2c3e50;
  font-family: "PingFang SC";
  font-weight: 600;
  animation: title 3s;
}
.index-box .my-i .line-h {
  width: 100%;
  height: 3px;
  background-color: #000;
  margin-bottom: 20px;
}
.index-box .my-i .btngroup {
  margin-top: -30px;
}
.index-box .my-i .btngroup a button {
  width: 100px;
  height: 42px;
}
@keyframes indexBc {
  0% {
    background: url("../assets/img/indexbc/bc4.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.1);
  }
  12.5% {
    background: url("../assets/img/indexbc/bc4.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.2);
  }
  25% {
    background: url("../assets/img/indexbc/bc2.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.1);
  }
  37.5% {
    background: url("../assets/img/indexbc/bc2.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.2);
  }
  50% {
    background: url("../assets/img/indexbc/bc3.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.1);
  }
  62.5% {
    background: url("../assets/img/indexbc/bc3.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.2);
  }
  75% {
    background: url("../assets/img/indexbc/bc1.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.1);
  }
  87.5% {
    background: url("../assets/img/indexbc/bc1.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.2);
  }
  100% {
    background: url("../assets/img/indexbc/bc1.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.1);
  }
}
 @-moz-keyframes indexBc {
  0% {
    background: url("../assets/img/indexbc/bc4.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.1);
  }
  12.5% {
    background: url("../assets/img/indexbc/bc4.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.2);
  }
  25% {
    background: url("../assets/img/indexbc/bc2.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.1);
  }
  37.5% {
    background: url("../assets/img/indexbc/bc2.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.2);
  }
  50% {
    background: url("../assets/img/indexbc/bc3.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.1);
  }
  62.5% {
    background: url("../assets/img/indexbc/bc3.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.2);
  }
  75% {
    background: url("../assets/img/indexbc/bc1.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.1);
  }
  87.5% {
    background: url("../assets/img/indexbc/bc1.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.2);
  }
  100% {
    background: url("../assets/img/indexbc/bc1.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.1);
  }
}

@-webkit-keyframes indexBc {
  0% {
    background: url("../assets/img/indexbc/bc4.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.1);
  }
  12.5% {
    background: url("../assets/img/indexbc/bc4.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.2);
  }
  25% {
    background: url("../assets/img/indexbc/bc2.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.1);
  }
  37.5% {
    background: url("../assets/img/indexbc/bc2.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.2);
  }
  50% {
    background: url("../assets/img/indexbc/bc3.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.1);
  }
  62.5% {
    background: url("../assets/img/indexbc/bc3.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.2);
  }
  75% {
    background: url("../assets/img/indexbc/bc4.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.1);
  }
  87.5% {
    background: url("../assets/img/indexbc/bc1.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.2);
  }
  100% {
    background: url("../assets/img/indexbc/bc1.jpg") no-repeat 0 0/100% 100%;
    transform: scale(1.1);
  }
}
@keyframes title {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
</style>
<template>
  <div class="index-box">
    <div class="bc-box">
      <div class="zzc"></div>
    </div>
    <div class="my-i .opt">
      <p>Hellow，I'm Mr·Wang</p>
      <p style="font-size: 30px; letter-spacing: 4px">
        It is never too late to learn
      </p>
      <div class="line-h"></div>
      <p style="font-size: 30px">我叫王帅鸣</p>
      <p style="font-size: 30px; letter-spacing: 4px">
        一名痴迷于技术的前端工程师
      </p>

      <el-row class="btngroup">
        <el-button type="primary" @click="toAboutme" plain> 关于小王</el-button>
        <el-button type="success" @click="toWorks" plain>作品展示</el-button>
        <el-button type="warning" @click="toMessageBoard" plain>给我留言</el-button>
      </el-row>
    </div>

    <a href="https://beian.miit.gov.cn/" target="blank"><div class="ba">©xiaowang | 豫ICP备2020036376号-1</div></a>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    toWorks() {
      this.$router.push({
        path: "/mine",
        query: {
          id: 3,
        },
      });
    },
    toAboutme(){
      this.$router.push({
        path: "/mine",
        query: {
          id: 1,
        },
      })
    },
     toMessageBoard(){
      this.$router.push('/messageboard')
    },
  },
  name: "Index",
  components: {},
};
</script>
